<template>
    <div class="main-body">
        <el-table
            :data="caseList"
            style="width: 100%;overflow: auto;padding: 0;"
            resizable
            :max-height="pageSize<totalCount?tableHe-80:tableHe-40"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-row-style="tableHeaderColor"
            :header-cell-style="{padding:'0px',background:'#E1F1FF'}"
        >
            <div slot="empty" class="empty">
                 <span>暂无数据</span>
            </div>
            <el-table-column width="80" type="index" v-if="labelList.length>0 && showSerialNumber">
            </el-table-column>
            <!--:render-header="labelHead"-->
            <el-table-column
                v-for="(item,index) in labelList"
                :key="index"
                :render-header="labelHead"
                show-overflow-tooltip
                :label="item.label"
                :prop="item.prop">
            </el-table-column>
            <el-table-column
                label="操作"
                width="150"
                align="center"
                v-if="(showEditor || showDelete) && labelList.length>0">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editorRow(scope.row)" v-if="showEditor">修改</el-button>
                    <el-button type="text" size="small" @click="deleteRow(scope.row)" v-if="showDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 24px;position: absolute;bottom: 15px;">
            <el-pagination
                :hide-on-single-page="showPagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[10,20,30,40,50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        showPagination:{//只有一页时隐藏分页
            type:Boolean,
            default:true
        },
        showSerialNumber:{//展示序号
            type:Boolean,
            default:true,
        },
        tableHe: {//列表高度
            type:Number,
            default:0
        },
        labelList:{//表头列表
            type:Array,
            default:[]
        },
        showEditor:{//编辑按钮
            type:Boolean,
            default:true
        },
        showDelete:{//删除按钮
            type:Boolean,
            default:true
        },
        caseList:{//表数据列表
            type:Array,
            default: []
        },
        totalCount:{//数据总数
            type:Number,
            default:0
        }
    },
    data() {
        return {
            pageNum:'1',
            pageSize:'10',
        }
    },
    methods:{
        labelHead(h,{column,index}){
            let l = column.label.length;
            let f = 15; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
            column.minWidth = f*l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
            //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
            return h('div',{class:'table-head',style:{width:'100%'}},[column.label]);

        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'color: #4389D6;height: 40px;'
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.qryMrktCase();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.qryMrktCase();
        },
        //查询
        qryMrktCase(){
            this.$emit('emPageClick',this.pageSize,this.pageNum)
        },
        editorRow(item){
            console.log(item)
            this.$emit('emEditorRow',this.pageSize,this.pageNum,item)
        },
        deleteRow(item){
            this.$emit('emDeleteRow',this.pageSize,this.pageNum,item)
        }
    },
}
</script>

<style scoped lang="less">
.main-body {
    background: #fff;
    padding: 16px;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
}
.empty{

}
.form-inline{
    text-align: center;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
.table-head{
    font-size:14px!important;
}
//滑动条 scoped失效
.el-table__body-wrapper::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
}
</style>
